<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - 股票新闻分析系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">股票新闻分析系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/dashboard">仪表盘</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/reports">策略报告</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/llm_analysis">大模型分析</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <h2 class="mb-4">分析仪表盘</h2>

        <div class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">市场趋势预测</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="trendChart" height="300"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="card-title mb-0">情感分析概览</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="sentimentChart" height="250"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h5 class="card-title mb-0">热门股票预测</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>股票代码</th>
                                        <th>股票名称</th>
                                        <th>行业</th>
                                        <th>预测趋势</th>
                                        <th>置信度</th>
                                        <th>情感得分</th>
                                        <th>相关新闻</th>
                                    </tr>
                                </thead>
                                <tbody id="stockTable">
                                    <tr>
                                        <td colspan="7" class="text-center">加载中...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white text-center py-3 mt-5">
        <div class="container">
            <p class="mb-0">股票新闻分析系统 &copy; 2025 版权所有</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 获取股票数据
        fetch('/api/stocks')
            .then(response => response.json())
            .then(data => {
                const stockTableEl = document.getElementById('stockTable');

                if (data.length > 0) {
                    let tableHTML = '';
                    data.forEach(stock => {
                        let trendClass = stock.prediction === '上涨' ? 'text-up' :
                            stock.prediction === '下跌' ? 'text-down' : 'text-stable';

                        tableHTML += `
                            <tr>
                                <td>${stock.code}</td>
                                <td>${stock.name}</td>
                                <td>${stock.industry}</td>
                                <td class="${trendClass}">${stock.prediction}</td>
                                <td>${(stock.confidence * 100).toFixed(1)}%</td>
                                <td>${stock.sentiment.toFixed(2)}</td>
                                <td><a href="/stock/${stock.code}" class="btn btn-sm btn-primary">查看详情</a></td>
                            </tr>
                        `;
                    });
                    stockTableEl.innerHTML = tableHTML;
                } else {
                    stockTableEl.innerHTML = '<tr><td colspan="7" class="text-center">暂无股票数据</td></tr>';
                }

                // 提取图表数据
                renderCharts(data);
            });

        // 渲染图表
        function renderCharts(stocksData) {
            // 市场趋势预测图表
            const trendData = {
                上涨: stocksData.filter(stock => stock.prediction === '上涨').length,
                下跌: stocksData.filter(stock => stock.prediction === '下跌').length,
                稳定: stocksData.filter(stock => stock.prediction === '稳定').length
            };

            const trendCtx = document.getElementById('trendChart').getContext('2d');
            new Chart(trendCtx, {
                type: 'bar',
                data: {
                    labels: Object.keys(trendData),
                    datasets: [{
                        label: '股票数量',
                        data: Object.values(trendData),
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.7)',
                            'rgba(75, 192, 192, 0.7)',
                            'rgba(255, 159, 64, 0.7)'
                        ],
                        borderColor: [
                            'rgb(255, 99, 132)',
                            'rgb(75, 192, 192)',
                            'rgb(255, 159, 64)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 情感分析概览图表
            const sentimentBuckets = {
                '积极 (>0.6)': stocksData.filter(stock => stock.sentiment > 0.6).length,
                '中性 (0.4-0.6)': stocksData.filter(stock => stock.sentiment >= 0.4 && stock.sentiment <= 0.6).length,
                '消极 (<0.4)': stocksData.filter(stock => stock.sentiment < 0.4).length
            };

            const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
            new Chart(sentimentCtx, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(sentimentBuckets),
                    datasets: [{
                        data: Object.values(sentimentBuckets),
                        backgroundColor: [
                            'rgba(75, 192, 192, 0.7)',
                            'rgba(255, 159, 64, 0.7)',
                            'rgba(255, 99, 132, 0.7)'
                        ],
                        hoverOffset: 4
                    }]
                }
            });
        }
    </script>
</body>

</html>